<template>
  <q-page  :padding="false">
      <q-inner-loading visible v-if="loading">
        <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
        <b class="text-primary">数据加载中...</b>
      </q-inner-loading>

      <q-stepper color="primary" ref="stepper" vertical
        @step="onStep">

        <q-step name="s1" :title="step1Title">

          <q-search class="full-width no-shadow" 
              placeholder="搜索城市" 
              :debounce="800" 
              v-model="cityQuery" 
              clearable
              @clear="citySearch('')" >
              <q-autocomplete @search="citySearch" @selected="citySelected" />
          </q-search>

          <div>
            <div class="q-my-xs"><small>热门城市：</small></div>
            <q-btn v-for="item in cityHot" :key="'hc'+item.id" 
              flat color="primary"
              :label="item.name"
              @click="citySelected(item)"
            />
          </div>
        </q-step>

        <q-step name="s2" :title="step2Title">
          <div v-if="model.city">
            <q-btn v-for="(item,idx) in model.city.areas.split(',')" :key="'area'+idx" 
              flat color="secondary"
              :label="item"
              @click="areaSelected(item)"
            />
          </div>
        </q-step>

        <q-step name="s3" :title="step3Title">
          <q-search class="full-width no-shadow" 
              placeholder="搜索影院" 
              :debounce="800" 
              v-model="cinemaQuery" 
              clearable
              @clear="cinemaSearch('')" >
              <q-autocomplete @search="cinemaSearch" @selected="cinemaSelected" />
          </q-search>
        </q-step>

        <q-step name="s4" :title="step4Title">
          <div v-if="model.cinema">
            <q-btn v-for="(item,idx) in model.cinema.halls.split(',')" :key="'hall'+idx" 
              flat color="secondary"
              :label="item"
              @click="hallSelected(item)"
            />
          </div>
        </q-step>
        <q-step name="s5" :title="step5Title" class="seat-step">
          <my-seat-map v-if="model.seats" :map="model.seats" :selected="model.selected"/>
          <q-stepper-navigation v-if="model.seats" class="q-px-lg">
            <q-btn color="primary" label="确定" class="full-width"
              @click="saveSeat"
            />
          </q-stepper-navigation>
          <q-inner-loading visible v-if="!model.seats">
            <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
            <b class="text-primary">座位图加载中...</b>
          </q-inner-loading>
        </q-step>
      </q-stepper>
  </q-page>
</template>

<style lang="stylus">
.seat-step .q-stepper-step-inner {
  padding-left:0 !important;
}
</style>


<script>
import MySeatMap from "../components/MySeatMap.vue";

const HOT_CITIES = [
  {id:3,name:'北京',areas:'东城区,昌平区,丰台区,西城区,海淀区,大兴区,朝阳区,通州区,石景山区,密云区,房山区,门头沟区,延庆区,顺义区,怀柔区,平谷区'},
  {id:1,name:'上海',areas:'松江区,金山区,黄浦区,长宁区,浦东新区,徐汇区,杨浦区,虹口区,普陀区,闵行区,奉贤区,静安区,宝山区,嘉定区,青浦区,崇明区'},
  {id:8,name:'广州',areas:'荔湾区,越秀区,海珠区,花都区,天河区,番禺区,白云区,增城区,黄埔区,萝岗区,南沙区,从化区'},
  {id:28,name:'深圳',areas:'福田区,龙岗区,南山区,罗湖区,龙华区,龙华新区,宝安区,坪山新区,盐田区,光明新区,大鹏新区'},
];


export default {
  name: 'PageEventSeat',
  components: { MySeatMap },
  data () {
    return {
      loading: true,  
      cityHot: HOT_CITIES,
      cityQuery:'',
      cinemaQuery:'',

      model: {
        city: false,
        area: false,
        cinema: false,
        hall: false,
        seats: false,
        selected: []
      }
    }
  },
  mounted() {
    let me = this;
    me.$api.ui.pageTitle = '活动影厅图';
    me.$api.ui.pageBackBtn = function(){
      me.$router.go(-1);
    }
    me.init();
  },
  methods: {
    init() {
        let me = this;
        let eventId = me.$route.params.id;
        me.$api.seat.loadEventSeatMap(eventId, res=>{
            me.loading = false;
            if(res.data.model) {
              me.model = res.data.model;
            } else {
              me.model = {
                city: false,
                area: false,
                cinema: false,
                hall: false,
                seats: false,
                selected: []
              };
            }
            
            // 确认步骤
            if(me.model.seats || me.model.hall) {
              me.$refs.stepper.goToStep('s5');
            } else if(me.model.cinema) {
              me.$refs.stepper.goToStep('s4');
            } else if(me.model.area) {
              me.$refs.stepper.goToStep('s3');
            } else if(me.model.city) {
              me.$refs.stepper.goToStep('s2');
            } else {
              me.$refs.stepper.goToStep('s1');
            }
        });
    },
    saveSeat() {
        let me = this;
        let eventId = me.$route.params.id;
        me.$api.seat.saveEventSeatMap(eventId, me.model, res=>{});
        me.$router.go(-1);
    },
    citySearch(val, done) {
      let me = this;
      this.cityQuery = val;
      if(done) {
        if(val) {
            me.$api.seat.searchCity(val, res=>{
              if(res.data.model.length == 0) {
                  //me.$q.notify({message: '没有符合条件的城市'});
                }
              done(res.data.model);
            });
        } else {
            done([]);
        }
      }
    },
    citySelected(city) {
      this.model.city = city;
      this.$refs.stepper.goToStep('s2');
    },
    areaSelected(area) {
      this.model.area = area;
      this.$refs.stepper.goToStep('s3');
    },
    cinemaSearch(val, done) {
      let me = this;
      this.cinemaQuery = val;
      if(done) {
          if(val) {
            me.$api.seat.searchCinema(me.model.city.id, me.model.area, val, res=>{
                if(res.data.model.length == 0) {
                  //me.$q.notify({message: '没有符合条件的影院'});
                }
                done(res.data.model);
            });
          } else {
              done([]);
          }
      }
    },
    cinemaSelected(cinema) {
      this.model.cinema = cinema;
      this.$refs.stepper.goToStep('s4');
    },
    hallSelected(hall) {
      this.model.hall = hall;
      this.$refs.stepper.goToStep('s5');
    },
    initSeat() {
      let me = this;
      me.$api.seat.searchSeatMap(me.model.cinema.id, me.model.hall, res=>{
        me.model.selected = res.data.model.selected;
        me.model.seats = res.data.model;
      });
    },
    onStep(val) {
      if(val == 's5') {
        if(!this.model.seats) {
          this.model.seats = false;
          this.model.selected = [];
          this.initSeat();
        }
      }
      if(val <= 's4') {
        this.model.hall = false;
        this.model.seats = false;
      }
      if(val <= 's3') {
        this.model.cinema = false;
        this.cinemaQuery = '';
      }
      if(val <= 's2') {
        this.model.area = false;
      }
      if(val <= 's1') {
        this.model.city = false;
        this.cityQuery = '';
      }
    }
  },
  computed: {
    step1Title() {
      return this.model.city?'活动城市：'+this.model.city.name:'选择城市';
    },
    step2Title() {
      return this.model.area?'活动城区：'+this.model.area:'选择城区';
    },
    step3Title() {
      return this.model.cinema?'活动影院：'+this.model.cinema.name:'选择影院';
    },
    step4Title() {
      return this.model.hall?'活动影厅：'+this.model.hall:'选择影厅';
    },
    step5Title() {
      return '确认座位图(勾选的座位用户签到时将不能选择)';
    }
  }
}
</script>
